<script setup>

import {ref,onMounted,defineProps,defineOptions,useSlots} from "vue";
defineOptions({
  inheritAttrs: false
})

let slots = useSlots();

let maxWidth = ref(50);
// let theTest = ref();
//
// let enlarging = ref(false);
// // 在鼠标悬停时触发的事件处理程序
// function handleHoverEvent() {
//   // 在这里放置你的鼠标悬停事件处理逻辑
//   console.log('Mouse hover event occurred');
// }
//
// let isInTheTarget = false
// function whenEntered(){
//   isInTheTarget = true;
//   setTimeout(()=>{
//     if(isInTheTarget){
//       enlarging.value = true;
//     }
//   },300)
// }
//
// function whenLeaved(){
//   isInTheTarget = false;
//   enlarging.value = false;
// }

onMounted(()=>{
  let theChildren = slots.default()[0].children;
  console.log("theChildren:",theChildren,theChildren.length,theChildren.length*11)
  maxWidth.value = theChildren.length*11;
  // console.log("theTest.addEventListener:",theTest.value.$el);
  // console.log("theTest.addEventListener:",theTest.value.addEventListener);
  // 添加事件监听器来触发节流处理程序
  // theTest.value.addEventListener('mouseenter', whenEntered);
  // theTest.value.addEventListener('mouseleave', whenLeaved);
  // theTest.value.addEventListener('mouseenter', throttledHoverHandler);
  // document.addEventListener()
})


</script>

<template>

<!--  <div ref="theTest" style="border: 1px solid" :class="{shrinked:!enlarging,enlarged:enlarging}"> test here</div>-->

<!--  <div @click="console.log($attrs.style[`z-index`])">-->
<!--  {{$attrs}}-->
<!--  <div :style="{zIndex:$attrs.style[`zIndex`],'&#45;&#45;base-zIndex':$attrs.style[`zIndex`]}" class="contDiv">-->
  <div :style="{'--base-zIndex':$attrs.style[`zIndex`]}" class="contDiv"

       @click="()=>{
         console.log(`the slots:`,slots.default()[0].children.length);
         console.log(`maxwidth:`,maxWidth);
         console.log(`--aniToHeight`,$attrs.style[`--aniToHeight`]);
       }">
<!--    {{$attrs.style}}-->
    <div style="height: 16px;width: 10px">
<!--      <div class="theTest" v-bind="$attrs" >-->
<!--      <div class="theTest" :style="{'&#45;&#45;aniToWidth':$attrs.style[`&#45;&#45;aniToWidth`]}">-->
      <div class="theTest"
           :style="{
              '--aniToWidth':(maxWidth>350?350:maxWidth)+`px`,
              '--aniToHeight':$attrs.style[`--aniToHeight`]
              // '--aniToHeight':`fit-content`
            }">
      <!--    <div class="theTest" >-->
        <slot></slot>
        <!--    </div>-->
      </div>
    </div>

  </div>
<!--  <el-text ref="theTest"> test here</el-text>-->
</template>
<!--50%{-->
<!--width: 120px;-->
<!--height: 40px;-->
<!--}-->
<style scoped>
.contDiv{
  //--base-zIndex:120;
  z-index: var(--base-zIndex);
  position: relative;
  //z-index: 121;
}
.contDiv:hover{
  //--base-zIndex:120;
  z-index: calc(var(--base-zIndex) + 19);
  //z-index: 121;
}
.theTest{
  font-size: 12px;
  width: 30px;
  height: 16px;
  border: 1px solid;
  border-radius: 3px;
  padding-left: 3px;
  overflow:hidden;
  background-color: white;
  position: absolute;
  //white-space: nowrap;
}
.theTest:hover{
  animation: enlarging .3s ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes enlarging {
  0%{
    width: 30px;
    height: 16px;
    //white-space: nowrap;
  }

  100%{
    width: var(--aniToWidth);
    //width: fit-content;
    max-width: 300px;
    max-height: 300px;
    min-height: 16px;
    //height: var(--aniToHeight);
    height: var(--aniToHeight);
    //white-space: normal;
  }
}

.shrinked{
  width: 100px;
  height: 100px;
}

.enlarged{
  width: 150px;
  height: 120px;
}

</style>